<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>详细信息</h3>
    <table></table>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        let $tr = $('table');
        let id = window.location.search.split('=')[1]

        // 判断是否传入 id ,如果有id 则为更新表格，没有就增加表格
        if (id === '' || id === null || id === undefined) {
            let html = `
                        <tr>
                            <td>Name:</td>
                            <td><input type='text' id='tdName' required placeholder="请输入用户名"></td>
                        </tr>
                        <tr>
                            <td>Pwd:</td>
                            <td><input type='text' id='tdPwd' required placeholder="请输入密码"></td>
                        </tr>
                        <tr>
                            <td>againPwd:</td>
                            <td><input type='text' id='tdPwdagain' required placeholder="请再次输入密码"></td>
                        </tr>
                        <td><input type="button" value="保存" onclick="Save()" id="save"></td>
                        <td><input type="button" value="返回" onclick="Return()" id="return"></td>                     
                    `
            $tr.append(html)
        } else {
            $.get('http://localhost:8080/user', (res) => {
                res.forEach(item => {
                    // 通过 id 找到需要更新的数据
                    if (item.id == id) {
                        let html = `
                        <tr>
                            <td>ID:</td>
                            <td><input type='text' value='${item.id}' required disabled id='tdId'></td>
                        </tr>
                        <tr>
                            <td>Name:</td>
                            <td><input type='text' value='${item.name}' required disabled id='tdName'></td>
                        </tr>
                        <tr>
                            <td>Pwd:</td>
                            <td><input type='text' value='${item.pwd}' required disabled id='tdPwd'></td>
                        </tr>
                        <td><input type="button" value="修改" onclick="Updata(${item.id})" id="updata"></td>
                        <td><input type="button" value="返回" onclick="Return()" id="return"></td>                     
                    `
                        $tr.append(html)
                    }
                })
            });
        }

        // 修改
        function Updata(id) {
            // 按钮值默认为'修改'，当点击修改时，修改按钮值变为'确认'，返回按钮值变为'取消'
            let $tdid = $('[id = tdId]');
            let $tdname = $('[id = tdName]');
            let $tdpwd = $('[id = tdPwd]');
            let $updata = $('[id = updata]');
            let $return = $('[id = return]');

            // 输入框默认为不可修改，当点击'修改'按钮时，输入框变为可修改
            $tdname.attr('disabled', false);
            $tdpwd.attr('disabled', false);

            //判断按钮值，为'确认'时执行保存事件，为'修改'时执行修改事件，并把按钮值变为'确认'和'取消'
            if ($updata.val() === '确认') {
                let obj = {
                    id: $tdid.val(),
                    name: $tdname.val(),
                    pwd: $tdpwd.val(),
                }

                $.ajax({
                    url: `http://localhost:8080/user/${id}`,
                    type: "PUT",
                    contentType: "application/json",
                    data: JSON.stringify(obj),
                    dataType: "json",
                    // 请求成功的回调函数
                    success: function () {
                        alert('保存成功！')
                        window.location.href = './index.html'
                    },
                    // 请求失败的回调函数
                    error: function () {
                        alert('保存失败！')
                        window.location.href = './index.html'
                    }
                });
            } else {
                $updata.attr('value', '确认')
                $return.attr('value', '取消')
            }
        }

        // 返回首页
        function Return() {
            let $tdname = $('[id = tdName]');
            let $tdpwd = $('[id = tdPwd]');
            let $updata = $('[id = updata]');
            let $return = $('[id = return]');

            if ($return.val() === '取消') {
                $tdname.attr('disabled', true);
                $tdpwd.attr('disabled', true);
                $updata.attr('value', '修改')
                $return.attr('value', '返回')
            } else {
                window.location.href = './index.html';
            }
        }

        // 保存数据
        function Save() {
            // 判断两次密码是否一致
            if ($('[id = tdPwd]').val() === $('[id = tdPwdagain]').val()) {
                let obj = {
                    id: 1,
                    name: $('[id = tdName]').val(),
                    pwd: $('[id = tdPwd]').val(),
                }

                $.ajax({
                    url: `http://localhost:8080/user`,
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(obj),
                    dataType: "json",
                    // 请求成功的回调函数
                    success: function () {
                        alert('保存成功！')
                        window.location.href = './index.html'
                    },
                    // 请求失败的回调函数
                    error: function () {
                        alert('保存失败')
                        window.location.href = './index.html'
                    }
                });

            } else {
                alert('两次密码不一致，请重新输入！')
            }
        }
    </script>
</body>

</html>